<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
            margin: 0px;
            padding: 0px;
            list-style: none;
            }
            ul{
                width: 300px;
                height: 300px;
                /* background: skyblue; */
                margin: 150px auto;
                position: relative;
                transform-style: preserve-3d;
                /* transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) */
                animation: ming 2s infinite linear;
            }
            @keyframes ming {
                0%{
                    transform: rotateX(0deg) rotateY(0deg) rotate(0deg)
                }
                100%{
                    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg)
                }
            }
            li{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            ul li img{
                width: 300px;
            }
            li:nth-last-of-type(1){
                /* background: springgreen; */
                transform: translateZ(150px)
            }            
            li:nth-last-of-type(2){
                /* background: yellowgreen; */
                transform: translateZ(-150px)
            }
            li:nth-last-of-type(3){
                /* background: slateblue; */
                transform: translateX(150px) rotateY(90deg)
            }
            li:nth-last-of-type(4){
                /* background: orange; */
                transform: translateX(-150px) rotateY(90deg)
            }
            li:nth-last-of-type(5){
                /* background: burlywood; */
                transform: translateY(150px) rotateX(90deg)
            }
            li:nth-last-of-type(6){
                /* background: red; */
                transform: translateY(-150px) rotateX(90deg)
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>
                    <img src="images/pic01.png" alt="">
                </li>
                <li>
                    <img src="images/pic02.png" alt="">
                </li>
                <li>
                        <img src="images/pic03.png" alt="">
                </li>
                <li>
                        <img src="images/pic04.png" alt="">

                </li>
                <li>
                        <img src="images/pic05.png" alt="">
                </li>
                <li>
                        <img src="images/pic06.png" alt="">
                </li>
            </ul>
        </div>
    </body>
</html>